<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据导出</title>
    <link href="/static/admin/layui/css/layui.css" rel="stylesheet">
    <script src="/static/admin/layui/layui.js"></script>
    <script type="text/javascript">
        layui.config({
            base: '/static/admin/layui/lay/modules/'
        }).extend({
            excel: 'excel.min'
        });
    </script>
    <script src="/static/admin/js/excel-import.js"></script>

    <style>
        #LAY-excel-export-excel{
            width        : 400px;
            color        : white;
            border       : none;
            margin       : 0 auto;
            padding      : 5px;
            display      : block;
            font-size    : 20px;
            margin-top   : 20px;
            background   : #23b7e5;
            box-shadow   : 2px 1px 5px 1px #d4d4d4;
            text-shadow  : 1px 1px 6px #868686;
            border-radius: 2px;
            
        }
        #LAY-excel-export-excel:hover{
            cursor: pointer;
        }
        .field{
            width     : 600px;
            margin    : 0 auto;
            border    : 1px #e2e2e2 solid;
            padding   : 10px;
            min-height: 200px;
            box-shadow: 2px 2px 3px 0px #e4e4e4;
            text-align: center;
        }
        .check-btn{
            color        : #058db7;
            margin       : 3px 5px;
            border       : 1px #23b7e5 solid;
            padding      : 5px 10px;
            display      : inline-block;
            box-shadow   : 0 0 1px 0 #a9e4ff;
            border-radius: 2px;
            
        }
        .hide{
            width     : 0 ;
            height    : 0;
            visibility: hidden;
        }
        .ischecked{
            color: white;
            background: #23b7e5;
        }
        .title{
            color      : #6d6d6d;
            width      : 600px;
            margin     : 0 auto;
            padding    : 20px;
            font-size  : 25px;
            text-align : center;
            margin-top : 20px;
            font-weight: 100;
            font-family: inherit;
            text-shadow: 5px 5px 5px #dcdada;
        }
        .time-limit{
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <form class="" >
        <div class="title">选择导出字段</div>

        <div class="time-limit">
            <div class="layui-inline">
                <div class="layui-input-inline">
                      <input autocomplete="off" type="text" name="start_time" class="layui-input" id="start_time" 
                             placeholder="开始时间(修改时间)">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input autocomplete="off" type="text" name="end_time" class="layui-input" id="end_time" 
                        placeholder="结束时间(修改时间)">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select id="status" name="sstatus" value="-1" class="layui-input">
                        <option value="-1">全部状态</option>
                        {foreach $status_config as $status}
                        <option value="{$status.id}">{$status.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>
        
        <div class="field"></div>
        <input type="button" value="excel导出" url="{:url('student/excelexport')}" class="btn btn-sm btn-info" id="LAY-excel-export-excel"/>
    </form>
    
</body>

<!-- js引入 -->
<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>

<script>

    $(function(){
        //点击按钮时改变样式
        $('.field').on('click','.check-btn',function(){
            $(this).toggleClass('ischecked');
        });

        var fieldConfig = {  //待选字段
            sid              : "编号",
            sname            : "姓名",
            stel             : "学生电话",
            zxr_tel          : "咨询人电话",
            consultant       : "顾问",
            infosource       : "信息来源",
            source_details   : "来源明细",
            receptionist     : "接待员工",
            contract_rate    : "签约率",
            sstatus          : "状态",
            degree           : "所学专业",
            graduation_school: "毕业院校",
            schedule         : "当前进度",
            zx_course        : "咨询课程",
            zx_form          : "咨询形式",
            create_time      : "咨询日期",
        };


        $.each(fieldConfig,function(index,value){ //遍历显示选项按钮
            var html = $(
                '<input type="checkbox" class="hide" id= "'+index+'" value="'+value+'">'+
                '<label class="check-btn" for="'+index+'">'+value+'</label>'
            );
            $('.field').append(html);
        });
    });

    layui.use(['laydate'], function () {
            var $ = layui.$;
            var laydate = layui.laydate;
            var nowTime = new Date().valueOf();
            var max = null;

            var start = laydate.render({
                elem: '#start_time',
                type: 'datetime',
                max: nowTime,
                btns: ['clear', 'confirm'],
                done: function (value, date) {
                    endMax = end.config.max;
                    end.config.min = date;
                    end.config.min.month = date.month - 1;
                }
            });

            var end = laydate.render({
                elem: '#end_time',
                type: 'datetime',
                max: nowTime,
                done: function (value, date) {
                    if ($.trim(value) == '') {
                        var curDate = new Date();
                        date = { 'date': curDate.getDate(), 'month': curDate.getMonth() + 1, 'year': curDate.getFullYear() };
                    }
                    start.config.max = date;
                    start.config.max.month = date.month - 1;
                }
            });
        });

</script>
</html>